:root {
    --yv-width: 100%;
    /* 主要颜色 */
    --yv-main-color: rgb(56, 56, 56);
    --yv-flip-color: rgb(233, 233, 233);
    /* Group 颜色*/
    --yv-group-text: rgb(233, 233, 233);
    --yv-group-color: rgb(56, 56, 56);
    --yv-group-item-text: black;
    --yv-group-item-back: white;
    --yv-group-item-split: rgb(233, 233, 233);

    /* 组件颜色 卡片 */
    --yv-card-shadow: #e9e8e8dd;
    --yv-card-color: #dddddd;
    /* 链接颜色 */
    --yv-link-color: rgb(0, 195, 255);
    --yv-link-hover-color: rgb(0, 102, 255);
}


body {
    margin: 0;
    padding: 0;
}

a {
    color: var(--yv-link-color);
    text-decoration: wavy;
}

a:hover {
    color: var(--yv-link-hover-color);
    text-decoration: underline;
}

a:visited {
    text-decoration: dashed;
}

.yv-electron-drag{
    -webkit-app-region: drag;
}

.yv-input-required::before{
    content: "*";
    color: red;
    font-size: 14px;
    vertical-align: middle;
}

.yv-row {
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-grow: 100%; */
    /* width: 100%; */
    /* flex: 0 0 100%; */

}

.yv-row[align="center"] {
    justify-content: space-around;
}

.yv-row[align="center"] .yv-col {
    align-items: center;
    justify-content: center;
}

.yv-row .yv-col {
    display: inline-flex;
    /* text-align: center; */
    vertical-align: middle;
}

/* #region yv-width 宽度 */

.yv-width-1 {
    width: 2.5%;
}

.yv-width-2 {
    width: 5%;
}

.yv-width-3 {
    width: 7.5%;
}

.yv-width-4 {
    width: 10%;
}

.yv-width-5 {
    width: 12.5%;
}

.yv-width-6 {
    width: 15%;
}

.yv-width-7 {
    width: 17.5%;
}

.yv-width-8 {
    width: 20%;
}

.yv-width-9 {
    width: 22.5%;
}


.yv-width-10 {
    width: 25%;
}

.yv-width-11 {
    width: 27.5%;
}

.yv-width-12 {
    width: 30%;
}

.yv-width-13 {
    width: 32.5%;
}

.yv-width-14 {
    width: 35%;
}

.yv-width-15 {
    width: 37.5%;
}

.yv-width-16 {
    width: 40%;
}

.yv-width-17 {
    width: 42.5%;
}

.yv-width-18 {
    width: 45%;
}

.yv-width-19 {
    width: 47.5%;
}

.yv-width-20 {
    width: 50%;
}

.yv-width-21 {
    width: 52.5%;
}

.yv-width-22 {
    width: 55%;
}

.yv-width-23 {
    width: 57.5%;
}

.yv-width-24 {
    width: 60%;
}

.yv-width-25 {
    width: 62.5%;
}

.yv-width-26 {
    width: 65%;
}

.yv-width-27 {
    width: 67.5%;
}

.yv-width-28 {
    width: 70%;
}

.yv-width-29 {
    width: 72.5%;
}

.yv-width-30 {
    width: 75%;
}

.yv-width-31 {
    width: 77.5%;
}

.yv-width-32 {
    width: 80%;
}

.yv-width-33 {
    width: 82.5%;
}

.yv-width-34 {
    width: 85%;
}

.yv-width-35 {
    width: 87.5%;
}

.yv-width-36 {
    width: 90%;
}

.yv-width-37 {
    width: 92.5%;
}

.yv-width-38 {
    width: 95%;
}

.yv-width-39 {
    width: 97.5%;
}

.yv-width-40 {
    width: 100%;
    /* flex: 0 0 100%; */
}

/* #endregion */

/* #region yv-col-{N} 列宽度*/

.yv-row .yv-col-0 {
    display: none;
    flex: 0 0 0%;
    width: 0%;
}

.yv-col-1 {
    flex: 0 0 2.5%;
    width: 2.5%;
}

.yv-col-2 {
    flex: 0 0 5%;
    width: 5%;
}

.yv-col-3 {
    flex: 0 0 7.5%;
    width: 7.5%;
}

.yv-col-4 {
    flex: 0 0 10%;
    width: 10%;
}

.yv-col-5 {
    flex: 0 0 12.5%;
    width: 12.5%;
}

.yv-col-6 {
    flex: 0 0 15%;
    width: 15%;
}

.yv-col-7 {
    flex: 0 0 17.5%;
    width: 17.5%;
}

.yv-col-8 {
    flex: 0 0 20%;
    width: 20%;
}

.yv-col-9 {
    flex: 0 0 22.5%;
    width: 22.5%;
}

.yv-col-10 {
    flex: 0 0 25%;
    width: 25%;
}

.yv-col-11 {
    flex: 0 0 27.5%;
    width: 27.5%;
}

.yv-col-12 {
    flex: 0 0 30%;
    width: 30%;
}

.yv-col-13 {
    flex: 0 0 32.5%;
    width: 32.5%;
}

.yv-col-14 {
    flex: 0 0 35%;
    width: 35%;
}

.yv-col-15 {
    flex: 0 0 37.5%;
    width: 37.5%;
}

.yv-col-16 {
    flex: 0 0 40%;
    width: 40%;
}

.yv-col-17 {
    flex: 0 0 42.5%;
    width: 42.5%;
}

.yv-col-18 {
    flex: 0 0 45%;
    width: 45%;
}

.yv-col-19 {
    flex: 0 0 47.5%;
    width: 47.5%;
}

.yv-col-20 {
    flex: 0 0 50%;
    width: 50%;
}

.yv-col-21 {
    flex: 0 0 52.5%;
    width: 52.5%;
}

.yv-col-22 {
    flex: 0 0 55%;
    width: 55%;
}

.yv-col-23 {
    flex: 0 0 57.5%;
    width: 57.5%;
}

.yv-col-24 {
    flex: 0 0 60%;
    width: 60%;
}

.yv-col-25 {
    flex: 0 0 62.5%;
    width: 62.5%;
}

.yv-col-26 {
    flex: 0 0 65%;
    width: 65%;
}

.yv-col-27 {
    flex: 0 0 67.5%;
    width: 67.5%;
}

.yv-col-28 {
    flex: 0 0 70%;
    width: 70%;
}

.yv-col-29 {
    flex: 0 0 72.5%;
    width: 72.5%;
}

.yv-col-30 {
    flex: 0 0 75%;
    width: 75%;
}

.yv-col-31 {
    flex: 0 0 77.5%;
    width: 77.5%;
}

.yv-col-32 {
    flex: 0 0 80%;
    width: 80%;
}

.yv-col-33 {
    flex: 0 0 82.5%;
    width: 82.5%;
}

.yv-col-34 {
    flex: 0 0 85%;
    width: 85%;
}

.yv-col-35 {
    flex: 0 0 87.5%;
    width: 87.5%;
}

.yv-col-36 {
    flex: 0 0 90%;
    width: 90%;
}

.yv-col-37 {
    flex: 0 0 92.5%;
    width: 92.5%;
}

.yv-col-38 {
    flex: 0 0 95%;
    width: 95%;
}

.yv-col-39 {
    flex: 0 0 97.5%;
    width: 97.5%;
}

.yv-col-40 {
    flex: 0 0 100%;
    width: 100%;
}

/* #endregion */

/* #region yv-offset 偏移*/
.yv-offset-0 {
    margin-left: 0%;
}

.yv-offset-1 {
    margin-left: 2.5%;
}

/* #endregion */

.yv-card {
    display: block;
    border-radius: 2pt;
    border: 1pt solid var(--yv-card-color);
    box-shadow: 1pt 1pt var(--yv-card-shadow);
    padding: 4pt;
}

.yv-group {
    width: 100%;
    color: var(--yv-flip-color);
    position: relative;
    text-align: center;
    font-size: 14pt;
}

.yv-group-block .yv-group-items{
    display: block;
}

.yv-group-items {
    font-size: 12pt;
    position: absolute;
    border-radius: 2pt;
    border: 1pt solid var(--yv-card-color);
    box-shadow: 1pt 1pt var(--yv-card-shadow);
    display: none;
    color: var(--yv-group-item-text);
    background: var(--yv-group-item-back);
    top: calc(100%);
    width: 96%;
    left: 2%;
    height: max-content;
    z-index: 100000001;
}

.yv-group:not(.yv-group-block):hover .yv-group-items {
    animation: alternate 0.6s yvGroupAnimation;
    display: block;
    margin: 0 auto;
}

.yv-group-item {
    /* 鼠标指针 */
    cursor: pointer;
    padding: 2%;
}

.font-white{
    color: var(--yv-flip-color);
}

.yv-group-items .yv-group-item:not(:first-child) {
    border-top: 1px solid;
    border-image: linear-gradient(to right, white, var(--yv-group-item-split), white) 1;
}

@keyframes yvGroupAnimation {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }

    to {
        opacity: 100%;
        transform: translateY(0%);
    }
}

.yv-button {
    display: inline-block;
    border-radius: 2pt;
    font-size: 12pt;
    width: max-content;
    padding: 3pt 6pt;
    letter-spacing: 0.2pt;
    cursor: pointer;
}

.yv-line::before {
    content: " ";
    display: inline-block;
    border-top: 1px solid;
    border-color: var(--yv-line-color);
    width: 38%;
    height: 1pt;
}

.yv-line::after {
    content: " ";
    display: inline-block;
    border-top: 1px solid;
    border-color: var(--yv-line-color);
    width: 38%;
    height: 1pt;
}

.yv-line[pos="start"]::before {
    width: 8%;
}

.yv-line[pos="start"]::after {
    width: 78%;
}


.yv-line {
    margin: 4pt 0;
    align-items: center;
    vertical-align: middle;
    color: var(--yv-line-front-color);
}